<template>
    <section>
        <div>
            <el-button type="primary" @click="test1">专升本测试</el-button>
            <el-button type="primary" @click="test2">高升专测试</el-button>
        </div>
        <div v-if="card" >
            <el-card class="box-card" >
                <div slot="header" class="clearfix topic">
                    <span class="bgcolor" style="line-height: 36px;">{{messages}}</span>
                </div>
                <div>
                   <el-input v-model="enterPhone" placeholder="请输入手机号,请与报名时填写的手机号一致"></el-input>
                </div>
                <div class="text">一、选择题</div>
                <div class="item" v-for="(item,index) in upgradedSelectList">
                    <p>{{index + 1}}.{{item.questionName}}({{item.selectPoint}}分)</p>
                    <p class="selectTopic">
                        <input type="checkbox" value="A">A.{{item.selectA}}
                        <input type="checkbox" value="B">B.{{item.selectB}}
                        <input type="checkbox" value="C">C.{{item.selectC}}
                        <input type="checkbox" value="D">D.{{item.selectD}}

                        <span class="answer" style="display:none">{{item.selectAnswer}}</span>
                        <span class="point" style="display:none">{{item.selectPoint}}</span>
                    </p>
                </div>
                <div class="text">二、判断题</div>
                <div class="item" v-for="(item,index) in upgradedJudgelist">
                    <p>{{index + 1}}.{{item.questionName}}({{item.selectPoint}}分)</p>
                    <p class="selectTopic">
                        <input type="checkbox" value="A">A.{{item.selectA}}
                        <br>
                        <input type="checkbox" value="B">B.{{item.selectB}}
                        <span class="answer" style="display:none">{{item.selectAnswer}}</span>
                        <span class="point" style="display:none">{{item.selectPoint}}</span>
                    </p>
                </div>
            </el-card>
            <div class="lastTime">
                <span>剩余时间：{{time}}分钟</span>
                <br>
                <el-button class="docommit" @click.native="mult(1)">交卷</el-button>
                <p></p>
            </div>
        </div>
    </section>

</template>
<script>
    import{enterTestSelect,addEnterScore}from '../../api/api'
    export default {

        data(){
            return {
                //单选按钮所用
                radio: '',
                radio1:'',
                scoreType:'',
                upgradedSelectList:[],
                upgradedJudgelist:[],
                time: 0,
                total: 0,
                card:false,
                enterPhone:'',
                messages:''
            }
        },
        methods: {
            //计算总分数
            mult(num) {
                // 题节点集合
                var stopic = document.getElementsByClassName("selectTopic");
                //正确答案集合
                var answers = document.getElementsByClassName("answer");
                //分数集合
                var points = document.getElementsByClassName("point");
                //总题目数量
                var slen = stopic.length;
                //总分0
                var totalScore = 0;
                //每做一道题 +1
                var sum = 0;
                for (var i = 0; i < slen; i++) {   // ***************************************   20次
                    //每一道题
                    var nodes = stopic[i].childNodes;
                    //每一个题的长度？？？
                    var nsLen = nodes.length;
                   /* console.log("每一个题的长度？？？" + nodes[0].checked + " * " + nodes[1].checked + " * " + nodes[2].checked + " * " + nodes[3].checked);*/
                    //学生答案
                    var stuans = "";
                    //nsLen 》》4  即可
                    for (var j = 0; j < nsLen; j++) {
                        var m = 0;
                        if (nodes[j].checked) {
                            m++;
                            //学生的答案就是   20道题的子节点  中被选中的
                            stuans += nodes[j].value;
                        }
                        if (m === 1 | m === 2 | m === 3 | m === 4) {
                            sum++;
                        }
                    }
                    //正确答案
                    var rans = answers[i].innerHTML;
                    var score = parseInt(points[i].innerHTML);
                   /* console.log("学生答案 = " + stuans + " 答案 " + rans);*/
                    //验证答案
                    if (stuans === rans) {
                        totalScore += score;
                       /* console.log(totalScore + "分数000");*/
                    }
                }  //      ***********************************************             20结束
                if (num == 1) {
                    this.$confirm('您有' + (slen - sum) + '题未做，确认交卷吗?', {
                        type: 'warning'
                    }).then(() => {
                        let param = {total: totalScore, enterPhone: this.enterPhone};
                        addEnterScore(param).then((res) => {
                            let {resMsg, resCode} = res;
                            //console.log(res.data);
                            if (resCode === 0) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功',

                                });
                            }
                        });
                    }).catch(() => {
                    });

                } else {
                    let param = {total: totalScore, enterPhone: this.enterPhone};
                    addEnterScore(param).then((res) => {
                        let {resMsg, resCode} = res;
                        //console.log(res.data);
                        if (resCode === 0) {
                            this.$message({
                                type: 'success',
                                message: '提交成功'
                            });
                        }
                    });
                }
            },
                    //获得专升本测试题
            test1: function () {
                this.scoreType=3;
                this.messages="专升本测试";
                let para = {
                    scoreType:this.scoreType,
                };
                enterTestSelect(para).then((res) => {
                    this.upgradedSelectList=res.resData.selectTopics;
                    this.upgradedJudgelist=res.resData.judgeTopics;
                });
                this.card=true;
            },
            //获得高升专测试题
            test2: function () {
                this.scoreType=4;
                this.messages="高升专测试";
                let para = {
                    scoreType:this.scoreType,
                };
                enterTestSelect(para).then((res) => {
                    this.upgradedSelectList=res.resData.selectTopics;
                    this.upgradedJudgelist=res.resData.judgeTopics;
                  /*  $("#card").css('display','block');*/
                });
                this.card=true;
            },
            getTest(){
            }
        },
        mounted() {
            this.getTest();
            let me = this;
            me.time = 60;
            let interval = window.setInterval(function () {
                let docommit = document.getElementsByClassName("docommit");
                if ((me.time--) <= 0) {
                    me.time = 0;
                    docommit[0].disabled = true;
                    window.clearInterval(interval);
                    //考试时间到自动提交分数
                    me.mult(0);
                }
                if (me.time === 10) {
                    document.getElementsByClassName("lastTime")[0].lastChild.innerHTML = "剩余时间不多了";
                }
            }, 1000 * 60);

        },

    }
</script>